<template>
	<div class="live_box">
		<div class="lives_v">
			<div>
				<slot name="video"></slot>
				
			</div>
		</div>
		<div class="top">
			<van-icon name="arrow-left" size="28" color="#ccc" class="goto" @click="golist()" />
			<!-- <navigator class="outu" style="margin-top: 14px;margin-left: 20px; z-index: 999;" target="" hover-class=""
				delta="1" open-type="navigateBack">
				<uni-icons type="back" class="" color="#ccc" size="30"></uni-icons>
			</navigator> -->
			<div class="live_user">
				<div class="live_top">
					<img class="top_img" :src="data.uptopData.img" mode="scaleToFill" />
					<div class="live_userinfo">
						<text class="name">{{ data.uptopData.name }}</text>
						<text>{{ data.uptopData.watch }}观看</text>
					</div>
				</div>
				<text v-if="!attentionStatus" class="text" @click="attention()">关注</text>
				<text v-else class="texts" @click="attention()">取消关注</text>
			</div>
			<div class="danmu" ref="scro">
				<div id="">
					<div class="list_danmu">
						<text class="name">公告</text>:
						<text class="detail">请文明发言，共创绿色网络环境</text>
					</div>
				</div>
				<div v-for="(item, index) in danmu" :key="index" :id="item.id">
					<div class="list_danmu">
						<img v-if="item.img" class="imgs" :src="item.img ? item.img : '../../jia1_03.jpg'"
							mode="scaleToFill" />
						<text class="name">{{ item.name }}</text>:
						<text class="detail">{{ item.comment }}</text>
					</div>
				</div>
				<div class="btns"></div>
			</div>
			<div class="live_bom">
				<slot name="uni-form"></slot>

				<div class="love">
					<text>{{ data.uplove }}</text>
					<van-icon name="like" v-show="!data.isicon" class="live_xins" color="#fff" size="30"
						@click="handleAnimation()" />
					<!-- <icon v-show="!data.isicon" type="heart-filled" class="live_xins" color="#fff" size="30"
						@click="handleAnimation()"></icon> -->
					<div class="item" v-show="data.isicon">
						<!-- <image src="/images/like.png" mode="widthFix"></image> -->
						<div :class="data.isAnimation ? 'animation start' : 'animation'" @click="handleAnimation()"></div>
					</div>

				</div>
			</div>
		</div>
	</div>
</template>


<script setup lang="ts">
// import {danmuAyy} from '../types/live'
interface NewType {
    img?: string,
    name:string,
    comment:string
	id:string
}
interface dataType {
// 点赞动画状态
isAnimation: boolean,
	// 点赞状态 是否要在弹幕中通知，只通知一次
	isicon: boolean,
	// 主播信息
	uptopData: any,
	// 点赞量
	uplove: number,
	upcolor: boolean,
}
import { reactive, ref, onMounted, defineExpose, watch , defineEmits } from 'vue'
import {useRoute,useRouter} from 'vue-router'
const $router = useRouter()
const scro = ref()
const { danmu } = defineProps({
	danmu:Array<NewType>
})
const name: any = danmu
// 需要父组件触发的事件
const loginAction = () => {
	scro.value.scrollTop = scro.value.scrollHeight
}
// 需要改变父组这里的方法会调用父组件触发的事件
defineExpose({
	loginAction
})
// // 监听属性
// watch(name, (newVal, oldVal) => {
// 	console.log({ newVal, oldVal })
// })
// import moduleName from 'module'
// const { safeAreaInsets } = uni.getSystemInfoSync()
const attentionStatus = ref(false)
const data:dataType  = reactive({
	// 点赞动画状态
	isAnimation: false,
	// 点赞状态 是否要在弹幕中通知，只通知一次
	isicon: false,
	// 点赞状态 是否要在弹幕中通知，只通知一次
	isapy: false,
	// 主播信息
	uptopData: {},
	// 点赞量
	uplove: 0,
	upcolor: false,
})
// 利用路由传参的方式渲染直播的布局
const route = useRoute()
data.uptopData = JSON.parse(route.query.item) 
const attention = () => {
	attentionStatus.value = !attentionStatus.value

}
const $emit = defineEmits()
// 点赞 利用组件传参的方式触发父组件的方法
const handleAnimation = () => {
	if (!data.isicon) {
		$emit('handleAnimation')
	}
	data.isAnimation = true
	data.isicon = true
	data.uplove++
	setTimeout(() => {
		data.isAnimation = false
	}, 1000)
}

// 退出直播间
const golist= ()=>{
	$router.go(-1)
}

</script>

<style  lang="scss">
.top {
	padding-top: 20px;
}
.lives_v {
	position: fixed;
	width: 100vw;
	height: 100vh;
	background: url('https://p1.itc.cn/images01/20211112/5db5999d5ab94e47b7bfe353f0b7e7cc.jpeg') no-repeat;
	background-size: cover;
}

.live_box {
	width: 100vw;
	height: 100vh;
	position: relative;

	.top {
		display: flex;
		z-index: 9999;

		.live_user {

			margin-left: 15px;
			display: flex;
			z-index: 9999;

			background: rgba(104, 104, 104, 0.3);
			padding: 5px;
			border-radius: 25px;

			.live_top {
				display: flex;
				z-index: 9999;

				align-items: center;

				.live_userinfo {
					display: flex;
					z-index: 9999;

					flex-direction: column;
					font-size: 12px;
					margin-left: 10px;

					.name {
						color: white;
						font-size: 12px;
						line-height: 17.5px;

					}

					text {
						color: rgb(211, 211, 211);
						font-size: 10px;
					}
				}

				.top_img {
					width: 30px;
					height: 30px;
					border-radius: 200px;
				}

			}

			.text {
				color: white;
				background: #FD6348;
				font-weight: 600;
				font-size: 12px;
				line-height: 25px;
				padding: 2.5px 0;
				text-align: center;
				width: 75px;
				border-radius: 20px;
				margin-left: 10px;
			}

			.texts {
				background: rgb(185, 185, 185);
				color: white;
				font-weight: 600;
				font-size: 12px;
				line-height: 25px;
				padding: 2.5px 0;
				text-align: center;
				width: 75px;
				border-radius: 20px;
				margin-left: 10px;
			}
		}



	}

	.danmu {
		position: absolute;
		// background: red;
		width: 95%;
		height: 200px;
		bottom: 100px;
		left: 10px;
		overflow-y: auto;

		.list_danmu {
			// display: flex;
			z-index: 9999;

			// align-content: center;
			background: rgba(96, 96, 96, 0.3);
			padding: 1.5px 8px;
			color: white;
			border-radius: 25px;
			line-height: 25px;
			font-size: 12px;
			font-weight: 250;
			margin-bottom: 5px;
			display: inline-block;

			.name {
				color: rgb(233, 233, 233);
				margin-left: 5px;
			}

		}

		.imgs {
			width: 20px;
			height: 20px;
			background: white;
			border-radius: 20px;
			margin-top: 3.5px;
			float: left;

			img {
				width: 100%;
				height: 100%;
			}
		}
	}

	.live_bom {
		width: 90vw;
		padding: 0 10px;
		position: fixed;
		bottom: 50px;
		display: flex;
		justify-content: space-between;

		.love {
			width: 40px;
			height: 40px;
			background: rgba(45, 45, 45, 0.3);
			border-radius: 40px;
			// line-height: 90px;
			// text-align: center;
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;

			text {
				position: absolute;
				top: -15px;
				font-size: 10px;
				color: rgb(225, 225, 225);
			}

			.live_xins {
				position: absolute;
				top: 55%;
				left: 50%;
				transform: translate(-50%, -50%);

			}
		}

		.uni-input {
			border: 1px solid rgb(179, 179, 179);
			background: rgba(82, 82, 82, 0.3);
			height: 30px;
			border-radius: 30px;
			padding-left: 5px;
			color: white;
			width: 60vw;
		}
	}
}

.animation {
	position: absolute;
	bottom: -7.5px;
	right: -12px;
	width: 65px;
	height: 140px;
	background-image: url("https://upload-dianshi-1255598498.file.myqcloud.com/gf0-e797afd02f87699f25d19783ae57cf0223d086af.png");
	background-size: 65px 140px;
	animation-timing-function: steps(1);
}

.start {
	animation: keyframes-like infinite 1s;
}

@keyframes keyframes-like {
	0% {
		width: 75px;
		height: 140px;
		background-image: url("https://upload-dianshi-1255598498.file.myqcloud.com/gf0-e797afd02f87699f25d19783ae57cf0223d086af.png");
		background-size: 75px 140px;
	}

	5.26% {
		background-image: url("https://upload-dianshi-1255598498.file.myqcloud.com/gf1-09a111164700987acf8ea6072e22a6d534fad304.png");
	}

	10.53% {
		background-image: url("https://upload-dianshi-1255598498.file.myqcloud.com/gf2-f2ef016e350f830915b25960ff8d0414ad2cc865.png");
	}

	15.79% {
		background-image: url("https://upload-dianshi-1255598498.file.myqcloud.com/gf4-ad54397b732bb30e8b2a9fcdaa9ce7681f31a2b7.png");
	}

	21.05% {
		background-image: url("https://upload-dianshi-1255598498.file.myqcloud.com/gf4-ad54397b732bb30e8b2a9fcdaa9ce7681f31a2b7.png");
	}

	26.32% {
		background-image: url("https://upload-dianshi-1255598498.file.myqcloud.com/gf5-742cd350b14a2e813f26eb6d8e0e6a2b7f0f7495.png");
	}

	31.58% {
		background-image: url("https://upload-dianshi-1255598498.file.myqcloud.com/gf6-55fe138217c7daeefe2886d3230458c9854dee32.png");
	}

	36.84% {
		background-image: url("https://upload-dianshi-1255598498.file.myqcloud.com/gf7-f610909dd0a47f420bf43672ba7e71c40ab7ca1b.png");
	}

	42.11% {
		background-image: url("https://upload-dianshi-1255598498.file.myqcloud.com/gf8-c8e2b501456ce61ddd23f3042d9cdacf4ce35d99.png");
	}

	47.37% {
		background-image: url("https://upload-dianshi-1255598498.file.myqcloud.com/gf9-4781d568d9edb682a71e5847401e2702c2a0d347.png");
	}

	52.63% {
		background-image: url("https://upload-dianshi-1255598498.file.myqcloud.com/gf10-3521679fdde136e5726aa8d681b25189347a6a3f.png");
	}

	57.89% {
		background-image: url("https://upload-dianshi-1255598498.file.myqcloud.com/gf11-3ee9c05cf585261a3f19ba6146b4f406d525f852.png");
	}

	63.16% {
		background-image: url("https://upload-dianshi-1255598498.file.myqcloud.com/gf12-129cf91dc532eb3eac55e66114094361e89400e6.png");
	}

	68.42% {
		background-image: url("https://upload-dianshi-1255598498.file.myqcloud.com/gf13-1fa7ebc06b177d5626fbbf23022c4eb0272f2050.png");
	}

	73.68% {
		background-image: url("https://upload-dianshi-1255598498.file.myqcloud.com/gf14-fa72d68535cbef624e121f3a6f6dd6ccb5f53267.png");
	}

	78.95% {
		background-image: url("https://upload-dianshi-1255598498.file.myqcloud.com/gf15-5c79af40e583b983152cb2cbe7c40a5f695d3983.png");
	}

	84.21% {
		background-image: url("https://upload-dianshi-1255598498.file.myqcloud.com/gf16-ff6d0b1776362d1d4178e6068f0bdfe875bc08e6.png");
	}

	89.47% {
		background-image: url("https://upload-dianshi-1255598498.file.myqcloud.com/gf17-acea8422f00f098361c92cb4338b1114d1144a07.png");
	}

	94.74%,
	100% {
		background-image: url("https://upload-dianshi-1255598498.file.myqcloud.com/gf18-e797afd02f87699f25d19783ae57cf0223d086af.png");
	}
}

.goto {
	padding-top: 6px;
}

.btns {
	width: 100%;
	height: 31px;
}


</style>